<template>
  <view>
    <view class="user-info-container">
      <view class="user-info-top">
        <view class="user-info-userinfo">
          <view class="user-info-name">
            <span class="user-info-name1">{{ userInfo.nickname }}</span>
            <text class="tn-icon-vip-diamond-fill" style="color: #fac901"></text>
            <span class="user-info-name2">{{ userInfo.roleKey === 'agent' ? '代理' : '会员' }}</span>
          </view>
          <view class="user-info-share" @click="copyShareCode">
            <text>分享吗：</text>
            {{ userInfo.inviteCode }}
            <text class="tn-icon-copy copy-icon"></text>
          </view>
        </view>
        <view class="user-info-avatar">
          <tn-avatar v-if='userInfo.headSculpture' :src="userInfo.headSculpture" size="lg"></tn-avatar>
          <tn-avatar v-else backgroundColor="#E7E7E7" icon="my-love" size="lg"></tn-avatar>
        </view>
      </view>

      <view class="user-info-main">
        <view class="user-info-order">
          <view>全部订单>></view>
        </view>
        <view @click="pageToSearch('2')">
          <text class="tn-icon-receipt big-icon"></text>
          <view>待付款</view>
        </view>
        <view>
          <text class="tn-icon-shopbag big-icon"></text>
          <view>已交易</view>
        </view>
        <view>
          <text class="tn-icon-pay big-icon"></text>
          <view>结尾款</view>
        </view>
        <view @click="pageToWallet">
          <text class="tn-icon-fireworks big-icon"></text>
          <view>钱包</view>
        </view>
      </view>

      <view v-if="userInfo.roleKey !== 'agent'" class="user-info-agency">
        <view class="agency-title">我的客户</view>
        <view class="agency-group">
          <view @click="pageTo('invited')">
            <text class="tn-icon-my-add big-icon"></text>
            <view>受邀客户</view>
          </view>
          <view @click="pageTo('transaction')">
            <text class="tn-icon-paperbag big-icon"></text>
            <view>交易情况</view>
          </view>
          <view>
            <text class="tn-icon-plane-fill big-icon"></text>
            <view>转发邀请</view>
          </view>
          <view style="width: 100rpx"></view>
        </view>
      </view>
      <view v-else class="user-info-agency">
        <view class="agency-title">其他功能</view>
        <view class="agency-group">
          <view @click="pageTo('invited')">
            <text class="tn-icon-lucky-money-fill big-icon"></text>
            <view>赚佣金</view>
          </view>
          <view @click="pageTo('transaction')">
            <text class="tn-icon-trust-fill big-icon"></text>
            <view>受邀人记录</view>
          </view>
          <view class="contact-btn">
            <button open-type="contact">
              <text class="tn-icon-service-fill big-icon"></text>
              <view>在线客服</view>
            </button>
          </view>
          <view @click="pageTo('presales')">
            <text class="tn-icon-wechat-fill big-icon"></text>
            <view>售前微信</view>
          </view>
        </view>
      </view>
      <tn-button @click="toLogin">登录</tn-button>
    </view>
  </view>
</template>
<script>
export default {
  name: "user",
  data() {
    return {
      userInfo: {}
    }
  },
  onLoad() {
    uni.getStorage({
      key: 'userInfo',
      success: (res) => {
        this.userInfo = res.data
      }
    })
  },

  methods: {
    toLogin() {
      uni.navigateTo({
        url: '/pages/login/index'
      })
    },
    pageTo(key) {
      uni.navigateTo({
        url: `/pages/user/${key}`
      })
    },
    pageToSearch(type) {
      uni.navigateTo({
        url: `/pages/main/search?type=${type}`
      })
    },
    copyShareCode() {
      uni.setClipboardData({
        data: '分享码',
        success: function () {
          uni.showToast({
            title: '复制成功',
            icon: 'none'
          })
        }
      })
    },
    pageToWallet() {
      uni.navigateTo({
        url: '/pages/user/wallet'
      })
    },
  },

}
</script>


<style lang="scss" scoped>
.user-info-container {
  height: 100vh;
  background-color: #f4f4f4;

  .user-info-top {
    display: flex;
    justify-content: space-between;
    padding: 0 30rpx;
    height: 260rpx;
    background: linear-gradient(1deg, #EE82EE 0%, #0081ff 100%);

    .user-info-userinfo {
      .user-info-name {
        .user-info-name1 {
          font-size: 40rpx;
          color: #fdfdd2;
        }

        .user-info-name2 {
          color: #F0F0F0;
          font-size: 22rpx;
        }
      }
    }

    .user-info-share {
      color: #d3cfcf;
      margin-top: 20rpx;

      .copy-icon {
        margin-left: 6rpx;
      }
    }
  }

  .user-info-main {
    padding-top: 70rpx;
    display: flex;
    justify-content: space-evenly;
    width: 90%;
    height: 220rpx;
    position: absolute;
    border-radius: 20rpx;
    background-color: #FFFFFF;;
    left: 50%;
    top: 150rpx;
    transform: translateX(-50%);

    .big-icon {
      font-size: 100rpx;
    }

    .user-info-order {
      padding: 6rpx 12rpx;
      right: 20rpx;
      position: absolute;
      top: 18rpx;
    }
  }

  .user-info-agency {
    width: 98%;
    height: 260rpx;
    position: absolute;
    border-radius: 20rpx;
    background-color: #FFFFFF;
    left: 50%;
    top: 450rpx;
    transform: translateX(-50%);

    .agency-title {
      font-weight: bold;
      padding: 6rpx;
      font-size: 33rpx;
    }

    .big-icon {
      font-size: 100rpx;
    }

    .agency-group {
      display: flex;
      justify-content: space-evenly;

      .contact-btn {
        /deep/ button {

          position: relative;
          display: block;
          margin-left: auto;
          margin-right: auto;
          padding-left: 0rpx;
          padding-right: 0rpx;
          box-sizing: border-box;
           font-size: 28rpx;
          text-align: center;
          text-decoration: none;
           line-height: 1;
          //line-height: 1.35;
          // border-radius: 5px;
          -webkit-tap-highlight-color: transparent;
          overflow: hidden;
          color: #000000;
          background-color: #fff;
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}


</style>